import React, {PureComponent} from 'react';
import {StyleSheet, View, Image, Text, TouchableOpacity, Clipboard, Alert} from 'react-native';

export default class extends PureComponent {
    copy = orderNo => {
        Clipboard.setString(orderNo.toString());
        Alert.alert('提示', '复制成功');
    };

    render() {
        const {item} = this.props;
        return (
            <View style={styles.item}>
                <Image source={{uri: item.pict_url}} style={styles.img} resizeMode="stretch"/>
                <View style={styles.info}>
                    <Text numberOfLines={1} style={styles.title}>{item.title}</Text>
                    <Text style={[styles.gray, {marginBottom: 10}]}>创建日期 {item.created_at}</Text>
                    <View style={{flex: 1, flexDirection: 'row', alignItems: 'center', marginBottom: 10}}>
                        <Text style={styles.gray}>订单号 {item.order_id}</Text>
                        <TouchableOpacity onPress={() => this.copy(item.order_id)}>
                            <View style={styles.btnWrap}>
                                <Text style={[styles.gray, {fontSize: 8}]}>复制</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.price}>
                        <Text style={styles.newPrice}>消费金额：￥{item.payPrice}</Text>
                        <Text style={styles.red}>奖励预估：￥{item.commission}</Text>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    item: {
        flexDirection: 'row',
        paddingTop: 8,
        paddingBottom: 8,
        paddingLeft: 16,
        paddingRight: 16,
        backgroundColor: '#fff',
    },
    img: {
        width: 90,
        height: 90,
        marginRight: 10
    },
    info: {
        flex: 1,
        height: 90,
        paddingTop: 4
    },
    title: {
        fontSize: 12,
        color: '#333333',
        marginBottom: 10
    },
    btnWrap: {
        paddingLeft: 10,
        paddingRight: 10,
        paddingTop: 2,
        paddingBottom: 2,
        borderWidth: 1,
        borderRadius: 20,
        borderColor: '#9e9e9e',
        marginLeft: 4
    },
    gray: {
        color: '#9e9e9e',
        fontSize: 10
    },
    price: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginTop: 2
    },
    red: {
        color: '#f42d17',
        fontSize: 10
    },
    newPrice: {
        fontSize: 9,
        color: '#333333'
    }
});